<template>
  <view class="rtopSection" @click="closeall">
    <view class="status_sec">
      <view class="s-w flex align-center justify-between s-auto padding-top padding-bottom">
        <view class="s-left flex align-center">
          <view class="text-white">
            <text class="text-lg text-bold4">￥</text>
            <text class="text-xlll text-bold dfw">200.5</text>
          </view>
          <view class="flex  flex-direction padding-left-xs justify-between">
             <text class="xxcj text-c3 bt_tips padding-left-sm">小程序价</text>
             <text class="text-white text-xs margin-top-sm">已付金额 (元)</text>
          </view>
        </view>
        <view class="s-right">
          <text class="text-xll text-white text-bold dfw">待服务</text>
        </view>
      </view>
      <view class="below-bg s-w s-auto flex justify-between padding align-center">
        <view class="be-left flex text-sm align-center">
          <text class="padding-right-sm text-white">支付剩余</text>
          <view class="countdown flex">
             <view class="tiem-box">{{ hours }}</view><text class="text-white">:</text>
             <view class="tiem-box ">{{ minutes }}</view><text class="text-white">:</text>
             <view class="tiem-box">{{ seconds }}</view>
          </view>
        </view>
        <view class="be-right text-sm text-white">
          <text>预约时间: 2024/12/1 14:30</text>
        </view>
      </view>
    </view>
    <view class="rpdBox"></view>
    <view class="rtpMainBox">
      <view class="box-1 box-bg padding"   :class="{ 'act': showDMore}" >
        <view class="od_title flex align-center justify-between">
          <text class="text-c3">隆平园店</text>
          <text class="acon-dianhua phonIco" @click="callPhone('15012916147')"></text>
        </view>
        <view class="rtp-ul padding margin-top" v-for="index in 4" :key="index">
          <view class="flex justify-between">
            <view class="con-l flex align-center">
              <text>158号</text>
              <text class="spot text-white margin-left-sm">点</text>
            </view>
            <view class="con-r flex align-center">
              <text class="text-c6">￥168</text>
              <text class="cuIcon-info text-c9 tit_tah" @click="showFeedesc"></text>
            </view>
          </view>
          <view class="flex justify-between text-c6 margin-top">
            <text class="">16:00-16:30/0.67个钟</text>
            <view class="flex align-center">710房<text class="vipstyle">VIP</text></view>
          </view>
          <view class="flex justify-end text-c6 margin-top">
            <text class="type-li">高级</text>
            <text class="type-li">女</text>
            <text class="type-li">盲人</text>
          </view>
        </view>
        <view class="showMore flex justify-center text-c9 text-df padding-top-sm padding-bottom-sm">
          <view class="mrcont" @click="showDMore = !showDMore">
          	{{ showDMore ? '收起' : '查看更多' }}
          	<text class="mrico" :class="[showDMore ? 'cuIcon-fold' : 'cuIcon-unfold']"></text>
          </view>
        </view>
      </view>
      <view class="box2 box-bg padding flex margin-top-sm">
        <view class="text-c9">茶餐</view>
        <view class="padding-left-xxlg text-c3">
          <text>绿茶（2）</text>
          <text>煲仔饭（2）</text>
        </view>
      </view>
      <view class="box3 box-bg padding  margin-top-sm " :class="{ 'act': showDMorePic}" >
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            订单总金额
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              ￥199
            </view>
            <view class="text-end text-xs text-c9">
              (小程序价)
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            优惠金额
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              -￥20
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            应付总金额
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4 red-war">
              ￥169.00
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            基础项目
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              ¥40.00
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            等级加收费
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              -¥20.00
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            手法加收费
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              +¥70.00
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            房费
          </view>
          <view class="flex-sub text-end mcont">
            <view class="text-c6 text-bold4">
              +¥0.00
            </view>
          </view>
        </view>
        <view class="showMore flex justify-center text-c9 text-df padding-top-sm padding-bottom-sm">
          <view class="mrcont" @click="showDMorePic = !showDMorePic">
          	{{ showDMorePic ? '收起' : '查看更多' }}
          	<text class="mrico" :class="[showDMorePic ? 'cuIcon-fold' : 'cuIcon-unfold']"></text>
          </view>
        </view>
      </view>
      
      <view class="box4 box3 box-bg padding  margin-top-sm">
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            预约人
          </view>
          <view class="flex-sub  mcont">
            <view class="text-c3 text-bold4">
             {{name}}
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between" @click.stop="showPop('editRef')">
          <view class="mtit text-c9 text-bold4">
            联系方式
          </view>
          <view class="flex-sub  mcont flex justify-between">
            <view class="text-c3 text-bold4">
             {{mobile}}
            </view>
            <view class="edit-phone flex align-center justify-center">修改</view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            交易单号
          </view>
          <view class="flex-sub  mcont">
            <view class="text-c3 text-bold4">
              YEK1200120100
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            下单时间
          </view>
          <view class="flex-sub  mcont">
            <view class="text-c3 text-bold4">
              2021-10-11 15:34:35
            </view>
          </view>
        </view>
        
        <view class="msg_item flex justify-between">
          <view class="mtit text-c9 text-bold4">
            预约时间
          </view>
          <view class="flex-sub  mcont">
            <view class="text-c3 text-bold4">
              2021-10-12 15:00:00
            </view>
          </view>
        </view>
        
        
      </view>
      
    </view>
    <view class="below-btn flex justify-between">
      <view class="be-li flex-sub flex align-center justify-center" @click.stop="showMore">更多
          <view class="p_rlt ormbxline">
          	<view class="morbox text-center text-lg down" :class="{show:show}">
          		<view class="p_rlt padding-bottom-sm">
          			<!-- :class="!item.menuHandle||item.menuHandle&&item.menuHandle.length<=1?'padding-tb-xs':'padding-tb-xs'" -->
          			<view class="mctbox sanjiao bg-white">
          				<view v-for="(item,index) in menuHandle" :key="index" :class="{act: findex===index}"
          					@click.stop="footerSwitch(index,item)" class="mpitm text-df">
          					{{ item.text }}
          				</view>
          				<!-- <view class="mpitm">
          				退款
          			</view> -->
          			</view>
          		</view>
          
          	</view>
          </view>
      </view>
      <view class="be-li bg-ge flex flex-sub align-center  flex-direction justify-center">
        <view class="text-xs">微信支付</view>
        <view><text class="text-xs">￥</text><text class="text-xl">1658</text></view>
      </view>
      <view class="be-li bg-or flex  flex-sub align-center flex-direction justify-center" :class="{'no-card':noCadr}">
        <view class="text-xs">会员卡支付</view>
        <view><text class="text-xs">￥</text><text class="text-xl">1576</text></view>
        <view class="posi-below flex align-end flex-direction">
          <view class="opencard" @click.stop="mnavTo('/pages/user/bindingCards/bindingCards')">去开卡绑卡</view>
          <view class="discount-posi  margin-top-xs">-30元</view>
        </view>
      </view>
    </view>
  </view>
  <editView ref="editRef" @confirm="editrefConfirm"></editView>
  <feeDescView ref="feeDescRefs"></feeDescView>
</template>

<script lang="ts" setup>
  import { ref,onMounted,onUnmounted } from "vue";
  import { onShow,onLoad } from '@dcloudio/uni-app';
  import { mnavTo } from '@/utils/helper';
  import editView from "./editContact.vue" //修改联系人信息
  import feeDescView from "./feeDesc.vue" //费用详情
  const editRef = ref(null)
  const feeDescRefs = ref(null)
  const showDMore = ref(false)
  const showDMorePic = ref(false)
  const noCadr = ref(true)
  // 定义倒计时的时间，假设是 1 小时
  const totalTime = ref(30 * 60); // 1小时，单位：秒 uni.setNavigationBarTitle({title: title});
  
  // 定义剩余的小时、分钟、秒
  const hours = ref(0);
  const minutes = ref(0);
  const seconds = ref(0);
  const menuHandle = ref<any>([
  	{
  		id: '0',
  		text: '套卡支付'
  	},
    {
    	id: '1',
    	text: '取消订单'
    }
  ])
  
  const show = ref(false)
  const modeClass = ref() 
  const findex = ref(0)
  
  onLoad((options)=>{
    if(options){
      uni.setNavigationBarTitle({title: 'jynn的开单'});
    }
  })
  
  const showMore = (type : any) => {
  	show.value = !show.value
  	modeClass.value = type
  }
  
  const closeall = () => {
    show.value = false
  }
  const name = ref('周杰伦')
  const mobile = ref('150****8511')
  const editrefConfirm = (data) => {
    if(data.value.name || data.value.mobile){
      name.value = data.value.name
      mobile.value = formatCardNo(data.value.mobile)
      console.log(data.value.name)
    }
  }
  
  const footerSwitch = (index : any, item : any) => {
  	findex.value = index;
    show.value = false
  }
  const formatCardNo = (cardNo) => {
    // 提取前三位和后四位，剩余部分用 *** 替换
    if (cardNo && cardNo.length >= 10) {
      return cardNo.slice(0, 3) + '***' + cardNo.slice(-4);
    }
    return cardNo; // 如果卡号不符合要求，返回原卡号
  };
  const showPop = (source: string, carlist?: any) => {
    switch (source) {
      case 'editRef': 
        editRef.value?.open();
        break;
      case 'feeDescRefs': 
        feeDescRefs.value?.open();
        break;
      default:
        break;
    }
  }
  
  const hidePop = (source: string) => {
    switch (source) {
      case 'editRef':
        editRef.value?.close();
        break;
      case 'feeDescRefs':
        feeDescRefs.value?.close();
        break;
      default:
        break;
    }
  }
  const showFeedesc = () => {
    showPop('feeDescRefs')
  }
  // 更新倒计时函数
  const updateCountdown = () => {
    if (totalTime.value > 0) {
      totalTime.value -= 1; // 每秒减少1
      hours.value = padZero(Math.floor(totalTime.value / 3600))
      minutes.value = padZero(Math.floor((totalTime.value % 3600) / 60))
      seconds.value = padZero(totalTime.value % 60)
    } else {
      clearInterval(timerId); // 倒计时结束，清除定时器
    }
  };
  //补零
  const padZero = (tiem:any) => {
    return tiem < 10 ? `0${tiem}` : tiem.toString();
  }
  
  // 定时器变量
  let timerId = null;
  
  onMounted(() => {
    // 初始化倒计时
    updateCountdown();
    // 每秒更新一次倒计时
    timerId = setInterval(updateCountdown, 1000);
  });
  
  onUnmounted(() => {
    // 清除定时器
    if (timerId) {
      clearInterval(timerId);
    }
  });
  
  const callPhone = (phone:any) => {
  	uni.makePhoneCall({ phoneNumber: phone })
  }
  
</script>

<style lang="scss" scoped>
  .s-w{
     width: 710rpx;
  }
  .s-auto{
    margin: 0 auto;
  }
  .status_sec{
    margin:0 auto;
    background-color: #56bf7a;
  }
  .text-xlll{
    font-size: 80rpx;
  }
  .text-bold4{
    font-weight: 400;
  }
  .bt_tips {
    width: 85rpx;
    height: 20rpx;
    font-size: 14rpx;
    padding-left: 20rpx;
    background: url('~@/static/xcxjia.png') no-repeat center/contain;
    line-height: 21rpx;
    border-radius: 20rpx;
    // background: #999;
  }
  .dfw{
    letter-spacing: 1rpx;
  }
  .countdown{
    .tiem-box{
      width: 38rpx;
      height: 38rpx;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #A9F4C3;
      background: #FFF;
      color: #666;
      margin-right: 10rpx;
      margin-left: 10rpx;
     
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .below-bg{
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .2);
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
  }
  .rpdBox {
  	width: 100vw;
  	height: 120rpx;
  	background-color: #56bf7a;
  	position: relative;
  }
  .rtpMainBox{
    position: relative;
    top: -88rpx;
    left: 20rpx;
    border-radius: 16rpx;
    width: calc(100vw - 40rpx);
    min-height: 300rpx;
    overflow: hidden;
    padding-bottom: 60rpx;
    .vipstyle{
      width: 36rpx;
      height: 24rpx;
      display: inline-block;
      background-color: #56BF7A;
      border-radius: 18rpx;
      font-size: 19rpx;
      color: #fff;
      text-align: center;
      line-height: 24rpx;
      margin-left: 4rpx;
    }
    
    .spot{
      width: 32rpx;
      height: 24rpx;
      border-radius: 17rpx;
      background: #56BF7A;
      font-size: 19rpx;
      display: inline-block;
      text-align: center;
      line-height: 24rpx;
    }
    .box-bg{
      border-radius: 16rpx;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    }
    .rtp-ul{
      width: 630rpx;
      border-radius: 12rpx;
      background: #F6F7F9;
    }
    .type-li{
      height: 34rpx;
      padding: 0 10rpx;
      border-radius: 4rpx;
      color: #56BF7A;
      border: 0.5px solid #56BF7A;
      background: rgba(86, 191, 122, 0.15);
      letter-spacing: 0.2px;
      font-size: 20rpx;
      line-height: 34rpx;
      margin-left: 20rpx;
    }
    
    .box-1{
      height: 636rpx; //226
      overflow: hidden;
      transition: height 0.1s ease-out;
      position: relative;
      .showMore{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        color: #999;
        font-size: 24rpx;
        text-align: center;
        background: #fff;
      }
      &.act{
        height: 1150rpx; //432
        transition: height 0.1s ease-out;
      }
      .phonIco {
      	display: inline-block;
      	width: 52rpx;
      	height: 52rpx;
      	text-align: center;
      	line-height: 51rpx;
      	border-radius: 50%;
      	color: #56bf7a;
      	font-size: 26rpx;
      	border: 1px solid #56bf7a;
      	box-sizing: border-box;
      	background: rgba(86, 191, 122, 0.2);
      }
      .tit_tah {
      	font-size: 24rpx;
      	margin-left: 4rpx;
      }
    }
    .box3{
      height: 431rpx;
      overflow: hidden;
      transition: height 0.1s ease-out;
      position: relative;
      .mtit{
        width: 140rpx;
      }
      .msg_item {
        height: 72rpx;
        width: 100%;
      }
      .showMore{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        color: #999;
        font-size: 24rpx;
        text-align: center;
        background: #fff;
      }
      &.act{
        height: 590rpx; //432
        transition: height 0.1s ease-out;
      }
    }
    .edit-phone{
      width: 108rpx;
      height: 48rpx;
      border-radius: 34rpx;
      background: #56BF7A;
      font-size: 24rpx;
      color: #fff;
      margin-top: -10rpx;
    }
  }
  .padding-left-xxlg{
    padding-left: 90rpx;
  }
  .red-war{
    color: #F00;
  }
  .below-btn{
    width: 100%;
    height: 108rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.05);
    .be-li{
      height: 100%;
      position: relative;
      
      &.no-card{
        background: #E8E8E8 !important;
      }
      &.bg-ge{
        background: #69D48E;
        color: #fff;
      }
       &.bg-or{
          background: #FFE4C8;
          color: #B5722C;
       }
    }
  }
  .posi-below{
    position: absolute;
    right: 5rpx;
    top: -46rpx;
    .opencard{
      width: 176rpx;
      height: 46rpx;
      border-radius: 100px 100px 0px 100px;
      background: #FF9700;
      box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
      color: #fff;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .discount-posi{
      width: 70rpx;
      height: 28rpx;
      border-radius: 50px 30px 30px 0px;
      background: #FF6D6D;
      box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
      color: #fff;
      font-size: 20rpx;
      text-align: center;
    }
  }
  .morbox {
  	position: absolute;
  	width: 240rpx;
  	height: 0; //128rpx  158rpx
  	line-height: 64rpx;
  	left: -98rpx;
  	bottom: 72rpx;
  	z-index: 3;
  	padding: 0;
  	overflow: hidden;
  	padding: 0 20rpx 0 20rpx;
  	// transform-origin: left bottom;
  
  	&.show {
  		height: auto;
  		transition: height 0.1s ease-out;
  	}
  
  	&.down {
  		transform-origin: center top;
  
  	}
  
  	.mctbox {
  		border-radius: 2px 2px 4px 4px;
  		// height: 128rpx;//128rpx
  		padding: 30rpx 0;
  		box-shadow: 0px 3rpx 6rpx -4rpx rgba(0, 0, 0, 0.12), 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.08), 0px 9rpx 20rpx 8rpx rgba(0, 0, 0, 0.05);
  	}
  
  	.act {
  		background: rgba(76, 162, 123, 0.10);
  		color: rgba(76, 162, 123, 0.85);
  	}
  
  }
  
  .sanjiao {
  	position: relative;
  
  	&.up {
  		&:before {
  			border-top: none;
  			top: -16rpx;
  			border-bottom-color: #fff;
  		}
  	}
  
  	&:before {
  		content: '';
  		position: absolute;
  		width: 0;
  		height: 0;
  		align-self: center;
  		position: absolute;
  		border: 16rpx solid transparent;
  		bottom: -16rpx;
  		left: 28rpx;
  		border-bottom: none;
  
  		border-top-color: #fff;
  		z-index: 1;
  	}
  
  }
</style>